<template>
  <a-table 
    :dataSource="list" 
    :columns="columns"
    :pagination="true">
    <!-- 为特殊的列做响应处理的 -->
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'createDate'">
            {{record.createDate.substring(0,10)}}
        </template>
         <template v-if="column.key === 'imgUrl'">
             <a-avatar :size="64" :src="record.imgUrl"></a-avatar>
        </template>
         <template v-if="column.key === 'role'">
            {{record.role.name}}
        </template>
         <template v-if="column.key === 'state'">
            {{record.state==1?'正常':'停用'}}
        </template>
        <template v-if="column.key === 'operation'">
           <a-popconfirm
              v-if="list.length"
              title="您确定要删除吗?"
              cancelText="取消"
              okText="确认"
              @confirm="onDelete(record._id)"
            >
              <a>删除</a>
           </a-popconfirm>
        </template>
    </template>
  </a-table>
</template>

<script lang="ts">
import {reactive,toRefs,onMounted} from 'vue'
import UserType from '../type/UserType'
import api from '../http/api'
import { message } from 'ant-design-vue';
export default {
  setup(){
    const columns=[
      {
        title:'用户名',
        dataIndex:'account',
        key:'account'
      },
      {
        title:'邮箱',
        dataIndex:'email',
        key:'email'
      },
      {
        title:'角色',
        dataIndex:'role',
        key:'role'
      },
      {
        title:'头像',
        dataIndex:'imgUrl',
        key:'imgUrl'
      },
      {
        title:'状态',
        dataIndex:'state',
        key:'state'
      },
      {
        title:'创建时间',
        dataIndex:'createDate',
        key:'createDate'
      },
      {
        title:'操作',
        dataIndex:'operation',
        key:'operation'
      },
    ]
    //响应式数据
    const state=reactive<{list:Array<UserType>}>({
      list:[]
    })
    const findUsers=async()=>{
      const result=await api.user.getAccountListApi()
      console.log(result.data.data);
      state.list=result.data.data
      
    }
    onMounted(()=>{
      findUsers()
    })
    const onDelete=async(id:any)=>{
        const result=await api.user.delAccountApi(id)
        if(result.data.code){
            message.success('成功删除用户信息');
            findUsers() 
        }
        
      
    }
    return{
      ...toRefs(state),
      columns,
      onDelete
    }
  }
}
</script>

<style>

</style>